<template>
    <div>
        分类：<input type="text" v-model="name">
        <button @click="add">提交</button>

        <br>
        <br>
        <br>
        <br>
        <table>

            <tr>
                <td>id</td>
                <td>分类</td>
                <td>操作</td>
            </tr>
            <tr v-for="i in catelist">
                <td>{{i.id}}</td>
                <td>{{i.name}}</td>
                <td>
                    <button @click="delcate(i.id)">删除</button>
                    <button  @click="xiugai(i.id )">修改</button>
                </td>
            </tr>
        </table>
        
        <br>
        <br>
        <br>

        <div v-show="b">
        修改：<input type="text" v-model="upname">
        <button @click="updatename">提交</button>
        </div>
        




    </div>
</template>

<script>
    export default {
        data(){
            return{
                name:'',
                catelist:[],
                upname:'',
                b:0,
                chuanid:'',
                page:2
            }
        },
        methods: {
            add(){
            this.$axios.post('lianxi/lianxi/',{name:this.name}).then(res=>{

            })
            },
            //获取分类
            getcate(){
                this.$axios.get('lianxi/lianxi/?page='+this.page).then(res=>{
                    this.catelist =res.data.list
                })
            },
            //删除
            delcate(id){
                this.$axios.delete('lianxi/lianxi/?id='+id).then(res=>{

                })
            },
            //修改
            updatename(){
                this.$axios.put('lianxi/lianxi/?id='+this.chuanid+'&name='+this.upname).then(res=>{

                })
            },
            //让影藏的修改框出现
            xiugai(id){
                this.b=1,
                this.chuanid = id
            }
        },
        //挂在前
        mounted() {
            this.getcate()
        },
    }
</script>

<style scoped>

</style>